<template>
  <section class="sample-section"  v-loading.lock="loading" element-loading-text="拼命加载中">
    <el-page-header @back="goBack" :content="title"></el-page-header>
    <el-card class="box-card">
      <el-row class="group">
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
          <div class="group-item">
            <div class="name">批次号</div>
            <div class="value">{{headData.batch_number}}</div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
          <div class="group-item">
            <div class="name">企业名称</div>
            <div class="value">{{headData.company_title}}</div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
          <div class="group-item">
            <div class="name">导入条数</div>
            <div class="value">{{headData.import_num}}（条）</div>
          </div>
        </el-col>
      </el-row>
      <el-row class="group">
        <el-col :sm="8" :xs="24">
          <div class="group-item">
            <div class="name">企业余额</div>
            <div class="value">{{headData.company_balance}}</div>
          </div>
        </el-col>
        <el-col :sm="8" :xs="24">
          <div class="group-item">
            <div class="name">企业应付金额</div>
            <div class="value">{{headData.payable_amount}}</div>
          </div>
        </el-col>
        <el-col :sm="8" :xs="24">
          <div class="group-item">
            <div class="name">文档汇总金额</div>
            <div class="value">{{headData.summary_amount}}</div>
          </div>
        </el-col>
      </el-row>
      <el-row class="group">
        <el-col :sm="8" :xs="24">
          <div class="group-item">
            <div class="name">导入周期</div>
            <div class="value">{{headData.date}}</div>
          </div>
        </el-col>
        <el-col :sm="16" :xs="24">
          <div class="group-item" :class="headData.error.length > 0 ? 'error' : ''">
            <div class="name">错误信息</div>
            <div class="value">{{headData.error[0]}}
              <el-popover
                placement="bottom"
                title="错误信息"
                trigger="hover">
                <div>
                  <p v-for="(error, index) in headData.error" :key="index">{{index + 1}}. {{error}}</p>
                </div>
                <span slot="reference" v-show="headData.error.length > 1"><i class="more el-icon-d-arrow-right"></i></span>
              </el-popover>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <el-table :data="listData"
                ref="table"
                :row-class-name="handleRowClassName"
                @selection-change="handleSelectionChange"
                style="width: 100%">
        <el-table-column align="center" prop="member_user_name" label="注册账号"></el-table-column>
        <el-table-column align="center" prop="pay_info.name" label="客户姓名"></el-table-column>
        <el-table-column align="center" prop="pay_info.bank_number" label="收款方客户账号">
          <template slot-scope="scope">
            <span v-if="scope.row.pay_info && scope.row.pay_type === '银行转账'">{{scope.row.pay_info.bank_number}}</span>
            <span v-else-if="scope.row.pay_info">{{scope.row.pay_info.alipay_account}}</span>
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="pay_type" label="付款方式"></el-table-column>
        <el-table-column align="center" prop="money_income" label="支付金额"></el-table-column>
        <el-table-column align="center" prop="money_pay" label="实付（结算）金额"></el-table-column>
        <el-table-column align="center" prop="remark" label="备注"></el-table-column>
        <el-table-column align="center" prop="address" label="错误信息">
          <template slot-scope="scope">
            <div class="error" v-for="(item, index) in scope.row.error_list" :key="index">{{item}}</div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <div class="buttons" v-if="isPass == false">
      <el-button @click="goBack()" type="danger">重新导入</el-button>
    </div>
    <div class="buttons" v-else>
      <el-button @click="doSubmit()" type="primary">确认提交</el-button>
    </div>
  </section>
</template>

<script>
  export default {
    name: 'validate',
    props: {
      companyId: {
        type: Number,
        default: 0
      },
      headData: {
        type: Object,
        default: {}
      },
      tableData: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        title: '核对付款明细',
        isPass: false,
        listData: []
      }
    },
    mounted() {
      this.listData = this.tableData
      if(!this.headData.error_status) {
        this.title = '确认付款明细'
        this.isPass = true
      }
    },
    methods: {
      handleSelectionChange(val) {
      },
      handleRowClassName({row, rowIndex}) {
        if (row.repeat) {
          return 'is-repeat'
        }
        if (row.error_list && row.error_list.length > 0) {
          return 'is-error'
        }
      },
      goBack() {
        this.$emit('cancel', true)
      },
      doSubmit() {
        this.$http({
          url: this.$http.adornUrl('/payment/create'),
          method: 'post',
          data: this.$http.adornData({
            'batch_number': this.headData.batch_number,
            'company_id':this.headData.company_id,
            'date': this.headData.date,
            'total_amount': this.headData.total_amount,
            'task_id': this.headData.task_id,
            'pay_file': this.headData.pay_file
          })
        }).then((res) => {
          if(res.data.code === 0) {
            this.$message.success("导入成功")
            this.$parent.$parent.$parent.$parent.$parent.tabsCloseCurrentHandle()
            this.$router.push({ name: 'payment-list'})
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .box-card {
    margin: 20px 0;
    .group {
      border: 1px solid #eee;
      .group-item {
        display: flex;
        height: 36px;
        line-height: 36px;
        text-align: center;
        &.error {
          .value {
            background: #FFEB3B;
            color: #F56C6C;
            text-align: left;
            overflow: hidden;
            padding: 0 20px;
            position: relative;
            .more {
              line-height: 36px;
              color: #F56C6C;
            }
          }
        }
        .name {
          width: 120px;
          background: #e5e9f2;
        }
        .value {
          flex: 1;
        }
      }
    }

    /deep/.is-repeat {
      .cell {
        color: #f56c6c;
      }
    }

    /deep/ .is-error {
      .error {
        color: #f56c6c;
      }
    }
  }

  .buttons {
    margin-top: 15px;
    text-align: center;
    .el-button {
      width: 100px;
    }
  }
</style>
